<template>
  <div class="app-container">
    <div>账户ID：{{accountDetail.ID}}</div>
    <div>账户编码：{{accountDetail.accountCode}}</div>
    <div>注册时间：{{accountDetail.createdAt}}</div>
    <div>余额：{{accountDetail.balance}}</div>
    <div>资产：{{accountDetail.balance}}</div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="档案" name="detail">
        

      </el-tab-pane>
      <el-tab-pane label="银行卡" name="bankcard">
    <el-table
      key="footmarkList"
      :data="footmarkList"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column label="足迹ID" prop="id" sortable="custom" align="center" width="140">
        <template slot-scope="{row}">
          <span>{{ row.ID}}</span>
          
        </template>
      </el-table-column>
      <el-table-column label="主题" prop="id" sortable="custom" align="center" width="140">
        <template slot-scope="{row}">
          <span>{{ row.username }}-{{row.role.title}}</span>
          
        </template>
      </el-table-column>
      <el-table-column label="设备" min-width="150px">
        <template slot-scope="{row}">
          <span class="link-type" @click="handleShow(row)">{{ row.fullname }}</span>
        </template>
      </el-table-column>
      <el-table-column label="资源" width="300">
        <template slot-scope="{row}">
            {{ row.remark }}
        </template>
      </el-table-column>
      <el-table-column label="位置" width="300">
        <template slot-scope="{row}">
            {{ row.channel.title }}
        </template>
      </el-table-column>
      <el-table-column label="停留" width="200">
        <template slot-scope="{row}">
            {{ row.loginTime }}
        </template>
      </el-table-column>
      <el-table-column label="发起时间" class-name="status-col" width="100">
        <template slot-scope="{row}">
          <el-tag :type="row.status">
            {{ row.status.label }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>

      </el-tab-pane>
      <el-tab-pane label="支出" name="incident">
        <el-table
          key="incidentList"
          :data="incidentList"
          border
          fit
          highlight-current-row
          style="width: 100%;"
        >
          >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column label="事件ID" prop="id" sortable="custom" align="center" width="140">
            <template slot-scope="{row}">
              <span>{{ row.ID}}</span>
              
            </template>
          </el-table-column>
          <el-table-column label="主题" prop="id" sortable="custom" align="center" width="140">
            <template slot-scope="{row}">
              <span>{{ row.username }}-{{row.role.title}}</span>
              
            </template>
          </el-table-column>
          <el-table-column label="事件时间" class-name="status-col" width="100">
            <template slot-scope="{row}">
              <el-tag :type="row.status">
                {{ row.status.label }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCannel()">
        取消
      </el-button>
      <el-button v-if="accountDetail.status.value === 5" type="danger" @click="handleDelete(accountForm)">
        删除
      </el-button>
    </div>
  </div>
</template>

<script>
import {  getAccountDetail, removeAccountByID } from '@/api/finance/account'


import waves from '@/directive/waves' // waves directive

import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  name: 'accountDetail',
  components: { Pagination },
  directives: { waves },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      tableKey: 0,
      activeName:"detail",
      incidentList:[],
      footmarkList:[],
      accountDetail: {
        identity: undefined,
        remark: '',
        account_identity: 0,
        title: '',
        status: {
          value:1
        }
      }
    }
  },
  created() {
    let accountID = this.$route.query && this.$route.query.accountID
      accountID = parseInt(accountID)
      if (!isNaN(accountID)) {
        this.listLoading = true
        getAccountDetail({
          "accountID":accountID
        }).then(response => {
          if (response.status === 200) {
            this.accountDetail = response.data
            console.log(this.accountForm)
          } else {
            this.$message({
              message: response.msg,
              type: 'error'
            })
          }
        })
      }
  },
  methods: {
    loadRoleList() {
      getRoleUseable().then(response => {
        if(response.status === 200){
          this.roleOptions = response.data.list
        }
      })
    },
    handleClick:function(){

    },
    handleCannel() {
      this.$router.push({ path: 'account' })
    },
    saveAccount() {
      let _this = this
      this.$refs['accountForm'].validate((valid) => {
        if (valid) {
          _this.accountForm.status = _this.accountForm.status.value;
          if(_this.accountForm.hasOwnProperty('ID')){
            if(_this.accountForm.ID !== undefined){
              _this.accountForm.accountID = _this.accountForm.ID;
            }

          }
          saveAccount(_this.accountForm).then((response) => {
          if (response.status === 200) {
            this.$message({
              message: '操作Success',
              type: 'success'
            })
            this.$router.push({ path: 'account' })
          } else {
            this.$message({
              message: response.msg,
              type: 'error'
            })
          }
          })
        }
      })
    },
    handleDelete(row, index) {
      removeAccountByID(row.ID).then(() => {
        this.$notify({
          title: 'Success',
          message: 'Update Successfully',
          type: 'success',
          duration: 2000
        })
        this.getList()
      })
    }
  }
}
</script>
